<template>
  <div class="p-8">
    <div class="max-w-6xl mx-auto space-y-8">
      <!-- 头部区域 -->
      <div class="flex items-center justify-between mb-8">
        <div>
          <h1 class="text-3xl font-bold text-gray-800">T100 内容</h1>
          <p class="mt-2 text-gray-600">选择以下功能模块，快速生成标准化的T100代码</p>
        </div>
      </div>

      <!-- 功能卡片网格 -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div
          v-for="(feature, index) in t100Features"
          :key="index"
          @click="router.push(feature.route)"
          class="group bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 hover:translate-y-[-2px] cursor-pointer border border-gray-100"
        >
          <div class="p-6">
            <!-- 图标和标题区 -->
            <div class="flex items-center mb-4">
              <div class="p-3 bg-purple-50 rounded-lg group-hover:bg-purple-100 transition-colors">
                <component :is="feature.icon" class="h-6 w-6 text-purple-600" />
              </div>
              <h3 class="text-lg font-semibold text-gray-800 ml-4 group-hover:text-purple-600">
                {{ feature.title }}
              </h3>
            </div>
            
            <!-- 描述文本 -->
            <p class="text-gray-600 text-sm leading-relaxed">{{ feature.description }}</p>
            
            <!-- 底部操作区 -->
            <div class="mt-4 flex items-center text-purple-600">
              <span class="text-sm font-medium">开始使用</span>
              <i class="ri-arrow-right-line ml-2 group-hover:translate-x-1 transition-transform"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { 
  Database,
  Search,
  Table,
  FileText
} from 'lucide-vue-next'

const router = useRouter()

const t100Features = [
  { 
    title: "数据库操作", 
    icon: Database, 
    description: "生成数据库相关操作代码，包括增删改查等基础功能", 
    route: "/t100/database"
  },
  { 
    title: "查询API", 
    icon: Search, 
    description: "基于SQL配置自动生成查询接口代码", 
    route: "/t100/query"
  },
  { 
    title: "表单维护", 
    icon: Table, 
    description: "生成表单维护相关代码，支持单表和多表操作", 
    route: "/t100/form"
  },
  { 
    title: "报表生成", 
    icon: FileText, 
    description: "快速生成报表相关代码，支持多种报表类型", 
    route: "/t100/report"
  }
]
</script> 